<template>
  <div :id="EchartId" class="Echarbox" style="width: 1600px;height: 600px"></div>
</template>

<script>
import uuidv1 from 'uuid/v1';
import {
  buildOption,
  buildTitle,
  buildGrid,
  buildXAxis,
  buildYAxis,
  buildPieSeries,
  buildLineSeries,
  buildSeries,
} from './buildEChartOption';
import { buildDateAxis } from '@/unit/tool';

import * as Echarts from 'echarts';

export default {
  name: 'LineChart',
  props: {
    lineData: Object,
  },
  data() {
    return {
      myChart: '',
      EchartId: '',
      timer: '',
      legendDataLists: [],
    };
  },
  watch: {
    lineData: function(newVal) {
      // let { dataLists, ...restOption } = newVal;
      // if (dataLists.length > 0) {
      //   let lineSeries = buildLineSeries(dataLists);
      //   let seriesLists = buildSeries(lineSeries);
      //   this.myChart.setOption({
      //     ...restOption,
      //     series: seriesLists,
      //   });
      // }
      // debugger;

      let { legendDataLists, lineNumberDataLists, xAxisDataLists, seriesDataLists } = newVal;

      this.legendDataLists = legendDataLists;
      this.myChart.setOption({
        legend: {
          textStyle: {
            color: '7c8ca5',
          },

          data: legendDataLists,
        },
        xAxis: [
          {
            data: xAxisDataLists,
          },
          {
            data: lineNumberDataLists,
          },
        ],
        series: seriesDataLists,
        // series: {
        //   data: seriesDataLists,
        // },
      });
    },
  },
  methods: {
    init_chart() {
      // 绘制图表
      let myChart = this.myChart;
      myChart.setOption({
        animation: false,
        title: {},
        grid: {
          left: 20,
          right: 20,
          bottom: 10,
          top: 50,
          containLabel: true,
        },
        legend: {
          color: '#7c8ca5',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            animation: false,
            label: {
              backgroundColor: '#505765',
            },
            padding: [5, 10],
          },
          label: {
            backgroundColor: '#505765',
          },
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#7C8CA5',
              },
            },
            // axisLabel: { interval: 50 },
          },
          {
            type: 'category',
            boundaryGap: false,
            axisTick: {
              show: true,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: '#7C8CA5',
              },
            },
            // axisLabel: { interval: 50 },
          },
        ],
        yAxis: {
          type: 'value',
          axisTick: {
            show: false,
          },
          minInterval: 1, //设置成1保证坐标轴分割刻度显示成整数。
          axisLine: {
            show: false,
            textStyle: {
              color: '#7C8CA5',
            },
          },
          axisLabel: {
            textStyle: {
              color: '#7C8CA5',
            },
          },
        },
        series: [],
      });
    },
    clearChart() {
      this.myChart.clear();
    },
  },
  created() {
    this.EchartId = uuidv1(); //获取随机id
  },
  mounted() {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = Echarts.init(document.getElementById(this.EchartId));
    this.init_chart();
  },
  destroyed() {
    this.myChart.clear();
  },
};
</script>

<style scoped="scoped">
.Echarbox {
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>
